<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    :back="!isShare"
    title=""
    :show-top="showTop"
    :dark="loaded ? false : true"
    :hideSafeArea="true"
    :bg-color="dynamicColor"
  >
    <template slot="title">
      <view class="title-container">
        <view
          class="left-arrow"
          v-if="isShare"
          @click="handleGotoZhiTuPage"
        ></view>
        <span
          class="return-index"
          v-if="isShare"
          @click="handleGotoZhiTuPage"
        ></span>
        <span>高考专业顾问服务</span>
      </view>
    </template>
    <view class="buy-page">
      <scroll-view class="container" scroll-y="true" @scroll="myPageScroll">
        <view class="sale-introduction-first"></view>
        <view class="sale-introduction-second"></view>
        <view class="sale-introduction-third"></view>
      </scroll-view>
      <view class="operation">
        <view class="right-button-solo" @click="handleClickConsult">
          <span style="margin-left: 35%">立即咨询</span>
        </view>
      </view>
    </view>
    <u-modal
      v-model="showPopup"
      :content="tipContent"
      width="70%"
      show-cancel-button
      @confirm="handleConfirmTips"
      @cancel="showPopup = false"
    ></u-modal>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import {
  addCartAndToOrder,
  addZhituPayOrder,
  getUserInfo,
  cardRegist,
  addBuryingPoint,
  getPersonOrDefaultCardType,
  getProductGroup,
} from "@/api/modules/career";
import share from "@/mixins/share";
import LoginDialog from "@/components/LoginDialog";
export default {
  mixins: [share],
  components: { LoginDialog },
  data() {
    return {
      jumpPersonId: 0,
      fromApp: "", //从什么端app跳转进来
      groupId: "", //用于折扣的groupId
      showMoreProduct: false,
      scene: 0,
      originFrom: "",
      buryingPointId: "",
      cardType: "",
      dynamicTitle: "",
      showTop: false,
      dynamicColor: "transparent",
      productSign: "", // 项目类型标识
      isShare: true,
      shareQuery: `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10`,
      sharePath: `/pagesSub/career/activity/JuniorCareerConsultantBuy?${this.shareQuery}`,
      shareTitle: "高考专业如何选择？顾问1V1带你找到适合孩子的好专业！",
      consultantId: "",
      currentShopListIndex: 0, // shopList点进去第几项
      navHeight: getApp().globalData.navHeight,
      provider: {},
      mallProductId: "",
      rightProductId: "",
      showPopup: false, // 控制弹出层显示隐藏
      cardKey: "", // 卡类型秘文
      isConsultant: false,
      opt: {},
      targetPath: "", // 经过扫码进来的传过来的需要跳转的目标路径，作为备用
      cardNo: "",
      personId: uni.getStorageSync("person-id").slice(2) || "",
      cardVersion: 2,
      tipContent: "您已经是职途的用户，是否直接跳转到职途主页？",
      shareImgUrl:
        "https://img3.job1001.com/ypMp/elan/images/junior_consult_buy_face.png",
      ZHI_TU_PAGE_V1: "/pagesSub/userCenter/careerPath/index",
      ZHI_TU_PAGE: "/pagesSub/userCenter/careerPathV2/index",
      targetPath: "",
      shareCareerInfoParams: {},
      serviceList: [],
    };
  },
  onLoad(opt) {
    console.log("opt------------", opt);
    this.targetPath = opt.targetPath || "";
    this.shareImgUrl =
      "https://img3.job1001.com/ypMp/elan/images/junior_consult_buy_face.png";
    // 这里是内部聊天分享逻辑
    if (opt.cardType) {
      this.cardKey = opt.cardTypeEncrypt;
      this.cardType = opt.cardType;
      this.consultantId = opt.consultantId;
      this.isConsultant = opt.isConsultant ? true : false;
      this.showMoreProduct = opt.isConsultant ? false : true;
      this.isShare = opt.isShare ? true : false;
    }
    //从小程序跳转过来的情况是没有cardType的 所以要在这里加一个,q2c端的两个环境卡号不一样
    this.cardType && uni.setStorageSync("cardType", this.cardType);
    this.cardKey && uni.setStorageSync("cardKey", this.cardKey);
    this.consultantId && uni.setStorageSync("sellId", this.consultantId);

    this.getUserInfoFn();

    let jumpPersonId = "";
    if (opt.jumpPersonId) {
      jumpPersonId = opt.jumpPersonId;
    }
    let jumpSource = "";
    if (opt.jumpSource) {
      jumpSource = opt.jumpSource;
    }
    let sourceType = "";
    if (opt.sourceType) {
      sourceType = opt.sourceType;
    }

    this.shareQuery = `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10&cardType=${this.cardType}`;
    this.sharePath = `/pagesSub/career/activity/JuniorCareerConsultantBuy?${this.shareQuery}`;

    this.shareCareerInfoParams = {
      etId: 20065,
      id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
      personId: uni.getStorageSync("person-id").slice(2) || "0",
      cardType: this.cardType
        ? this.cardType
        : uni.getStorageSync("cardType") || this.cardType,
      consultantId: uni.getStorageSync("sellId")
        ? uni.getStorageSync("sellId")
        : "",
      originType: this.originFrom == "shareLink" ? 10 : 20,
      statType: "40",
      jumpPersonId: jumpPersonId,
      jumpSource: jumpSource,
      sourceType: sourceType,
    };
    //外部链接点击统计事件
    if (jumpSource && sourceType) {
      this.addBuryingPointFn(20083, "50", jumpPersonId, jumpSource, sourceType);
    }
  },
  onShow() {
    const launchOptions = uni.getLaunchOptionsSync();
    console.log("场景值:", launchOptions.scene);
    this.scene = launchOptions.scene;
    this.buryingPointId = "";
    wx.reportEvent("enter_college_consult_advertise_click", {}); //职业测评结果页 — 点击咨询 — 高考顾问服务营销页
    //  埋点统计访问次数
    this.addBuryingPointFn(20084, "", "", "", "");

    // 埋点统计时长
    this.addBuryingPointFn(20085, "60", "", "", "");
  },
  created() {
    uni.getProvider({
      service: "payment",
      success: (res) => {
        this.provider = res.provider;
      },
    });
  },
  onHide() {
    this.$refs.loginDialog.setVisibility(false);
    this.addBuryingPointFn(20085, "60", "", "", "");
  },
  onUnload() {
    console.log("这里进入了onUnload周期");
    this.addBuryingPointFn(20085, "60", "", "", "");
  },
  mounted() {},
  methods: {
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
      if (res.code == 200) {
        if (res.data.id) {
          if (etId == 20085) this.buryingPointId = res.data.id;
        }
      }
    },
    handleConfirmTips() {
      this.showPopup = false;
      if (this.cardVersion == 2) {
        uni.redirectTo({
          url: this.ZHI_TU_PAGE,
        });
      } else {
        uni.redirectTo({
          url: this.ZHI_TU_PAGE_V1,
        });
      }
    },
    myPageScroll(e) {
      //滚动改变颜色
      this.showTop = e.target.scrollTop >= 60;
      if (this.showTop) {
        this.dynamicColor = "#ffffff";
      } else {
        this.dynamicTitle = "";
        this.dynamicColor = "transparent";
      }
    },
    handleGotoZhiTuPage() {
      uni.navigateBack();
    },
    async loginSuccessBack() {
      await this.getUserInfoFn();
      await this.getProductGroupFn();
    },
    async getProductGroupFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        productType: 2,
        cardType: this.cardType,
        productSignList: ["HIGH_ASSESSMENT_SERVICE"],
      };
      const res = await getProductGroup(params);
      if (res.code == 200 && Array.isArray(res.data)) {
        if (res.data.length > 0) {
          this.serviceList = res.data;
          this.gotoPay();
        } else {
          this.showPopup = true;
        }
      } else {
        uni.showToast({ icon: "none", title: res.status_desc, duration: 1500 });
      }
    },
    async cardRegistFn() {
      const params = {
        cardKey: this.cardKey || "1", // cardType或者cardKe至少传一个
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync("cardType") || this.cardType,
        sellId: +this.consultantId,
      };
      const res = await cardRegist(params);
      if (res.code != 200) {
        uni.showToast({ icon: "none", title: res.status_desc, duration: 1500 });
      }
    },
    async getUserInfoFn() {
      const params = { uid: "" };
      const res = await getUserInfo(params);
      if (res.code == 200) {
        // cardNoe和cardType是同时存在的
        await this.getPersonOrDefaultCardTypeFn();
        if (!res.data.cardNo) {
          // 说明此时没有绑卡 要自动绑卡(这里是针对中学生的项目)
          await this.cardRegistFn();
        } else {
          this.cardVersion = res.data.cardVersion;
        }
      }
    },
    async getPersonOrDefaultCardTypeFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        cardSource: "HIGH_ASSESSMENT", // 如果是默认注册是关于高考的卡，就要穿这个参数获取到cardType
      };
      const res = await getPersonOrDefaultCardType(params);
      if (res.code == 200 && res.data.cardType) {
        this.cardType = res.data.cardType;
        uni.setStorageSync("cardType", res.data.cardType);
      }
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    async handleClickConsult() {
      //  埋点统计访问次数
      this.addBuryingPointFn(20097, "", "", "", "");
      this.personId = uni.getStorageSync("person-id").slice(2) || "";
      if (!this.personId) {
        uni.setStorageSync("isZhituUser", true);
        this.showLoginDialog();
        return;
      }
      await this.getProductGroupFn();
    },
    async gotoPay() {
      wx.reportEvent("buy_click_college_consult_advertise_click", {}); //高考顾问服务营销页—点击购买
      this.mallProductId =
        this.serviceList[0].productList[0].mallProductId || "";
      this.rightProductId = this.serviceList[0].productList[0].id || "";
      this.addCartAndToOrder();
    },
    //1.生成订单
    async addCartAndToOrder() {
      uni.showLoading({
        title: "生成订单中...",
        mask: true,
      });
      const params = {
        orderType: "ZT_SERVICE",
        mallProductId: this.mallProductId,
        channelType: 83,
        sourceType: 3,
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        cardType: uni.getStorageSync("cardType"),
        orderCondition: {
          rightProductId: this.rightProductId,
        },
      };
      const res = await addCartAndToOrder(params);
      if (res.code == 200) {
        this.rightProductId = "";
        this.mallProductId = "";
        this.addZhituPayOrder(res.data);
      } else {
        this.rightProductId = "";
        this.mallProductId = "";
        uni.hideLoading();
        uni.showToast({
          title: res.status_desc || "生成订单失败",
          icon: "none",
          duration: 2000,
        });
      }
    },
    //2.通过订单获取支付信息
    async addZhituPayOrder(data) {
      const params = {
        ...data,
        orderType: "ZT_SERVICE",
        wayCode: "WX_LITE",
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        personName: uni.getStorageSync("personName"),
        openid: uni.getStorageSync("openid"),
      };
      const res = await addZhituPayOrder(params);
      if (res.code == 200) {
        this.requestPayment(res.data);
      } else {
        uni.hideLoading();
        uni.showToast({
          title: res.status_desc || "获取商品信息失败",
          icon: "none",
          duration: 2000,
        });
      }
    },
    //3.使用支付信息调用支付
    requestPayment(data) {
      uni.hideLoading();
      if (this.provider.indexOf("wxpay") < 0) {
        return;
      }

      const payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: (res) => {
          console.log("支付成功");
          uni.setStorageSync("edition-Type", 10);
          uni.setStorageSync("isBuy", 1);
          uni.navigateTo({
            url: `/pagesSub/userCenter/careerPathV2/components/zhituPayFinish?mallOrderId=${data.orderId}&targetPath=${this.targetPath}`,
          });
          wx.reportEvent("buy_success_college_consult_advertise_click", {}); //高考顾问服务营销页—点击购买
        },
        fail: (err) => {
          console.log("支付失败");
          uni.showToast({
            title: "支付失败,请您重新支付",
            icon: "none",
            duration: 3000,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "careerPath/";

@font-face {
  font-family: "D-DIN-PRO-700-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}

.title-container {
  display: flex;
  flex-direction: row;

  .return-index {
    position: absolute;
    left: 70rpx;
  }

  .left-arrow {
    position: absolute;
    left: 24rpx;
    top: 18rpx;
    width: 34rpx;
    height: 34rpx;
    color: #000000;
    background-image: url($img-base + "career/arrow-left-wuhan.png?v=1");
    background-size: 100% 100%;
  }
}

.buy-page {
  width: 100%;

  .container {
    height: 90vh;

    .sale-introduction-first {
      height: 8012rpx;
      background-image: url($img-base-person + "junior_consult_buy_bg.png?v=1");
      background-size: 100%;
    }

    .sale-introduction-second {
      height: 0rpx;
      // background-image: url($img-base-person + "CBuyPageBackground1.png");
      background-size: 100%;
    }

    .sale-introduction-third {
      height: 0rpx;
      // background-image: url($img-base-person + "CBuyPageBackground2.png");
      background-size: 100%;
    }
  }

  .operation {
    width: 100%;
    height: 10vh;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: row;
    padding: 18rpx 32rpx 30rpx 30rpx;
    background-color: #ffffff;

    .left-button {
      flex-basis: 240rpx;
      height: 80rpx;
      border-radius: 200rpx;
      border: 2rpx solid #ff711e;
      margin-right: 16rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #ff711e;
      font-size: 30rpx;
    }

    .right-button,
    .right-button-solo {
      flex-grow: 1;
      height: 84rpx;
      background-image: url($img-base + "careerPath/wuhan-buynow2.png");
      background-size: 100% 100%;
      color: #ffffff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: left;
      padding: 24rpx 48rpx 20rpx 48rpx;

      span {
        font-family: D-DIN-PRO, D-DIN-PRO;
        font-weight: 800;
        font-size: 32rpx;
      }
    }

    .right-button-solo {
      background-image: url($img-base + "careerPath/wuhan-buynow.png");
    }
  }

  .shopping-operation {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .shopping-cart {
      flex-basis: 360rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      margin-top: -40rpx;

      .chosen {
        color: #888888;
        font-size: 28rpx;

        span {
          color: #ff711e;
          margin: 0 10rpx;
          font-weight: 800;
        }
      }

      .price {
        color: #222222;
        font-size: 30rpx;

        span {
          color: #ff711e;
          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
        }
      }
    }
  }

  .popup-info {
    ::v-deep .u-drawer-bottom {
      background-color: #f4f6f8;
    }

    .title {
      font-weight: 800;
      font-size: 36rpx;
      color: #222222;
      padding: 28rpx 32rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .close-button {
        width: 40rpx;
        height: 40rpx;
        padding: 12rpx;
        box-sizing: border-box;
        background-image: url($img-base + "career/shoppingCarCloseButton.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .choose-service {
      height: 77%;
      border-radius: 16rpx;
      background-color: #ffffff;
      width: calc(100% - 32rpx);
      margin: 0 auto;
      padding: 34rpx 24rpx;
      box-sizing: border-box;
    }

    .shop {
      margin-bottom: 36rpx;

      .shop-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-weight: 800;
        font-size: 36rpx;
        color: #111111;
      }

      .discount-content {
        margin-top: 10rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        .discounts {
          width: 90rpx;
          height: 40rpx;
          border-radius: 6rpx;
          border: 2rpx solid #fb5806;
          font-weight: 400;
          font-size: 24rpx;
          color: #fb5806;
          margin-left: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .discount-name {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #fb5806;
          margin-left: 20rpx;
        }
      }

      .shop-desc {
        /* margin-left: 60rpx; */
        width: 100%;
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;

        span {
          color: #ff711e;
          margin: 0 10rpx;
        }
      }

      .desc-box {
        width: calc(100% - 50rpx);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* padding: 0 50rpx; */
        margin-left: 60rpx;
        margin-top: 12rpx;

        .left-desc {
          flex-basis: 90%;
        }

        .right-arrow {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
          background-image: url($img-base + "career/right-arrow.png?v=1");
          background-size: 100% 100%;
        }
      }

      .service-item {
        display: flex;
        flex-direction: row;
        /* align-items: center; */
        margin-top: 42rpx;
        box-sizing: border-box;

        .service-picture {
          width: 148rpx;
          height: 148rpx;
          border-radius: 16rpx;
        }

        .right-card {
          display: flex;
          flex-direction: row;
          align-items: top;

          .right-info {
            margin-left: 18rpx;
            width: 450rpx;

            .service-name {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 800;
              font-size: 32rpx;
              color: #333333;
              margin-bottom: 12rpx;
            }

            .service-desc {
              white-space: normal;
              font-weight: 400;
              font-size: 28rpx;
              color: #777777;
              /* margin-top: 12rpx; */
              line-height: 40rpx;
            }

            .service-price {
              margin-top: 12rpx;
              color: #ff711e;
              /* font-weight: 800; */
              font-family: "D-DIN-PRO-700-Bold";
              display: flex;
              flex-direction: row;
              align-items: center;

              .old-price {
                margin-left: 10px;
                position: relative;
                padding: 5rpx;
                color: #d29875;

                .line {
                  position: absolute;
                  top: 50%;
                  width: 100%;
                  height: 2rpx;
                  background-color: #af734f;
                }
              }
            }
          }
        }
      }

      .choose-button,
      .choose-sth {
        /* width: 40rpx; d*/
        height: 40rpx;
        border-radius: 32rpx;
        border: 2rpx solid #d3d3d3;
        margin-right: 20rpx;
        flex-basis: 40rpx;
        margin-top: 54rpx;
      }

      .choose-sth {
        background-image: url($img-base-person + "chooseSth.png");
        background-size: 100%;
      }
    }

    .shopping-operation {
      background-color: #ffffff;
      height: 10vh;
      position: absolute;
      bottom: 0;
      padding: 0rpx 32rpx 30rpx 30rpx;

      .discount-price {
        color: #fb5806;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
      }

      .right-button {
        flex-grow: 1;
        height: 84rpx;
        background-image: url($img-base + "careerPath/wuhan-buynow3.png");
        background-size: 100% 100%;
        color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        padding: 24rpx 48rpx 20rpx 48rpx;
        margin-top: -40rpx;

        span {
          font-family: D-DIN-PRO, D-DIN-PRO;
          font-weight: 800;
          font-size: 32rpx;
        }
      }
    }
  }

  .service-detail {
    ::v-deep .u-drawer-bottom {
      background-color: #f4f6f8;
    }

    .top {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 34rpx;
      justify-content: space-between;

      .top-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .left-arrow {
        width: 28rpx;
        height: 28rpx;
        color: #000000;
        margin-right: 8rpx;
        background-image: url($img-base + "career/arrow-left-wuhan.png?v=1");
        background-size: 100% 100%;
      }

      .title {
        font-weight: 800;
        font-size: 36rpx;
        color: #222222;
        padding: 28rpx 32rpx 28rpx 12rpx;
      }

      .close-button {
        width: 48rpx;
        height: 48rpx;
        padding: 12rpx;
        box-sizing: border-box;
        background-image: url($img-base + "career/sharepopupCloseBtn.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .more-detail {
      height: 90%;
      /* border-radius: 16rpx; */
      background-color: #f4f6f8;
      width: calc(100% - 16rpx);
      margin: 0 auto;
      padding: 12rpx 24rpx 34rpx 24rpx;
      box-sizing: border-box;

      .service {
        border-radius: 16rpx;
        width: 100%;
        background-color: #ffffff;
        padding: 28rpx 24rpx;
      }

      .title {
        font-weight: 800;
        font-size: 36rpx;
        color: #222222;
      }

      .service-card {
        margin-top: 16rpx;
        padding: 28rpx 32rpx;
        background-color: #fff5e8;
        border-radius: 6rpx;

        .header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .name {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 32rpx;
            color: #222222;
          }

          .price {
            font-weight: 800;
            font-size: 44rpx;
            color: #ff5e00;
            font-family: "D-DIN-PRO-700-Bold";
            font-weight: 800;
          }
        }

        .footer {
          font-weight: 400;
          font-size: 28rpx;
          color: #9c8074;
          margin-top: 16rpx;
        }
      }

      .complimentary-detail {
        width: 100%;
        padding: 28rpx 12rpx;

        .complimentary-text {
          color: #666666;
          width: 100%;
          margin-top: 24rpx;

          span {
            white-space: normal;
          }
        }

        .shop-desc {
          /* margin-left: 60rpx; */
          width: 100%;
          font-weight: 400;
          font-size: 24rpx;
          color: #888888;

          span {
            color: #ff711e;
            margin: 0 10rpx;
          }
        }
      }

      .other-service {
        width: 100%;
        padding: 24rpx 32rpx;
        background-color: #eaeced;
        margin-top: 16rpx;
        border-radius: 6rpx;

        .desc {
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          margin-top: 16rpx;
        }
      }
    }
  }
}
</style>
